<template>
	<div class="wrapper search">
		<!-- 头部 -->
		<v-head></v-head>
		<div class="content center align-start" style="position: relative">
			<div class="left bfff classification-tree">
				<div class="f34 fbold title center flex-start">
					<div class="hr"></div>
					<span>所属分类</span>
				</div>
				<el-tree
					@check="onTree"
					ref="treeRef"
					:data="data"
					show-checkbox
					node-key="name"
					highlight-current
					check-on-click-node
					:props="{ value: 'id', label: 'name', children: 'children' }"
				/>
			</div>
			<div class="cast" @click="drawer = true">所属分类</div>
			<el-drawer v-model="drawer" size="70%" :with-header="false">
				<div class="f34 fbold title center flex-start">
					<div class="hr"></div>
					<span>所属分类</span>
				</div>
				<el-tree
					@check="onTree"
					ref="treeRef"
					:data="data"
					show-checkbox
					node-key="name"
					highlight-current
					:props="{ value: 'id', label: 'name', children: 'children' }"
				/>
			</el-drawer>
			<div class="flex right">
				<div class="right-top">
					<div class="center flex-start c60 type" style="cursor: pointer">
						<div class="f18" @click="zhiShi" :class="{ cfff: activeIndex == 1 }">主题知识库</div>
						<div class="f18" :class="{ cfff: activeIndex == 2 }" @click="videoClick">企业视频课程库</div>
					</div>
					<div class="center flex-start fWrap posr">
						<el-select v-model="classification.type" class="search-type">
							<el-option
								v-for="item in options"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
						<div class="input-q">
							<el-input
								type="text"
								placeholder="请输入"
								class="bfff elInput"
								v-model="searchText"
								clearable
								@keyup.enter="onSearch"
							/>
						</div>
						<el-button type="primary" class="search-btn" :icon="Search" @click="onSearch">搜索</el-button>
						<div class="c333 f14 gaoji hover" @click="gaoJi = true">高级搜索</div>
						<!-- 高级搜索 -->
						<div class="posa souSuo-alert" v-if="gaoJi">
							<el-button class="guanbi" :icon="CloseBold" @click="gaoJi = false"></el-button>
							<div class="center flex-start">
								<div class="label f16 c72">时间范围</div>
								<el-date-picker
									v-model="time"
									type="daterange"
									range-separator="-"
									start-placeholder="开始时间"
									end-placeholder="结束时间"
									value-format="YYYY-MM-DD 00:00:00"
									@blur="timeBlur"
								/>
								<div class="hr"></div>
								<div class="c666 f14 hover" @click="circumference">一周</div>
								<div class="hr"></div>
								<div class="c666 f14 hover" @click="moon">一月</div>
								<div class="hr"></div>
								<div class="c666 f14 hover" @click="year">一年内</div>
							</div>
							<div class="flie">
								<div class="label f16 c72">文档类型</div>
								<div class="flie-item">
									<span
										@click="onFlie(item, index)"
										class="flie-text"
										:class="{ flieText2: activeFlie == index }"
										v-for="(item, index) in typesList"
										:key="index"
										>{{ item }}</span
									>
								</div>
							</div>
							<!-- <div class="center flex-start">
								<div class="label f31 c72">本次精确搜索在</div>
								<el-select v-model="leftSearch" class="gaoji-search-type">
									<el-option
										v-for="item in options"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</el-select>
								<div class="text">中</div>
								<el-select v-model="rightSearch" class="gaoji-search-type gaoji-search-type2">
									<el-option
										v-for="item in fuzzyPrecision"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</el-select>
								<el-input class="gaoji-input" v-model="accurateSearch"></el-input>
								<img src="@/assets/image/search/jia.png" class="jia-icon" alt="" @click="jia" />
							</div>
							<div class="center flex-start">
								<div class="label">
									<el-select v-model="also" class="gaoji-search-type gaoji-search-type2">
										<el-option
											v-for="item in options2"
											:key="item.value"
											:label="item.label"
											:value="item.value"
										/>
									</el-select>
								</div>
								<el-select v-model="form.type" class="gaoji-search-type">
									<el-option
										v-for="item in options"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</el-select>
								<div class="text">中</div>
								<el-select v-model="form.type" class="gaoji-search-type gaoji-search-type2">
									<el-option
										v-for="item in options"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</el-select>
								<el-input class="gaoji-input"></el-input>
								<img src="@/assets/image/search/jian.png" class="jia-icon" alt="" />
							</div> -->
							<div class="center">
								<el-button @click="resetting" :icon="RefreshRight" class="refresh"> 重置 </el-button>
								<el-button @click="retrieval" :icon="Search" type="primary"> 检索 </el-button>
							</div>
						</div>
					</div>
					<div class="re center">
						<img src="@/assets/image/index/huo.png" class="huo-icon" alt="" />
						<div class="f14 c60 reci">热词：</div>
						<div class="flex center flex-start re-wrap">
							<div
								class="cff9 hover f14 reci"
								v-for="item in hotWords"
								:key="item.id"
								@click="onHotWords(item)"
							>
								{{ item.name }}
							</div>
						</div>
					</div>
				</div>
				<div class="bfff right-main" v-if="list && list.length">
					<div class="center f16 screen fWrap">
						<div class="flex c333">
							全系统共检索到
							<span class="ctheme">{{ total }}</span
							>&nbsp;篇
						</div>
					</div>
					<div class="box center hover acline" v-for="(item, index) in list" :key="index">
						<div class="box-info flex">
							<div class="center flex-start nowrap" style="margin-top: 0.5rem" @click="onTo(item)">
								<div class="f20 title">
									<div v-if="item.highlightFields.title">
										<div class="hei" v-html="item.highlightFields.title[0]"></div>
									</div>
									<div v-else>{{ item.content.title }}</div>
								</div>
								<div class="c903 f14">{{ shijian(item.content.fileDate) }} 发布</div>
							</div>
							<div class="c903 f14 author" @click="onTo(item)">
								<div class="hei">
									作者：
									<span v-if="item.highlightFields.fileOwner">
										<span class="hei" v-html="item.highlightFields.fileOwner[0]"></span>
									</span>
									<span v-else>{{ item.content.fileOwner }}</span>
								</div>
								<div class="hei">
									来源：<span>{{ item.content.source }}</span>
								</div>
							</div>

							<div v-if="item.highlightFields.fileContent" class="conter-text f14">
								<div
									@click="onTo(item)"
									v-if="dianji[index]"
									v-html="item.highlightFields.fileContent[0]"
								></div>
								<div @click="onTo(item)" v-else v-for="it in item.highlightFields.fileContent">
									<div v-html="it"></div>
								</div>
								<div v-if="item.highlightFields.fileContent.length > 1">
									<div v-if="dianji[index]" @click="dianji[index] = false" class="dianjiAll">
										点击展开全部
									</div>
									<div v-else class="dianjiAll" @click="dianji[index] = true">点击收回</div>
								</div>
							</div>
							<div v-else @click="onTo(item)" class="conter-text1">{{ item.content.fileContent }}</div>
							<div class="c903 f14" @click="onTo(item)">
								标签：<span
									class="bq"
									v-for="(item, index) in item.content.fileTags"
									v-html="item"
								></span>
							</div>
						</div>
						<div class="labels" @click="onTo(item)">
							<div class="center" :class="{ 'colum': isMobile, 'align-end': isMobile }">
								<el-button type="primary">立即查看</el-button>
							</div>
						</div>
					</div>
					<div style="display: flex; justify-content: center; padding: 20px 0">
						<v-pagination
							:total="+total"
							:size="pageSize"
							:page="current"
							@pagination="fetchList"
							@paginations="fetchLists"
						></v-pagination>
					</div>
				</div>
				<div v-else class="emp">
					<div class="center f16 c60">暂无数据</div>
					<div class="center f16 c60">请重新搜索</div>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<v-myfoot></v-myfoot>
	</div>
</template>

<script setup>
import { Search, Star, StarFilled, RefreshRight, CloseBold } from "@element-plus/icons-vue"
import { useSettingStores } from "@/store/settings"
import { useFormatDate } from "/utils/useDate.js"
import { ElMessage, ElMessageBox, ElLoading } from "element-plus"

const settingStore = useSettingStores()
const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
const isMobile = computed(() => settingStore.isMobile)
const treeRef = ref()
const fileType = ref("")
const dianji = ref([])
const activeFlie = ref(null)
const inputIf = ref(false)
const activeIndex = ref(1)
const defaultProps = {
	children: "children",
	label: "label",
}
// 排序
const sortActive = ref("4")
const sort = ref(["下载量", "发布时间", "标签检索", "浏览量", "相关度"])
//高级搜索开关
const gaoJi = ref(false)
//高级搜索
const leftSearch = ref("")
const rightSearch = ref("")
const accurateSearch = ref("")
const drawer = ref(false)
//所属分类数据
const data = ref([])
const dataKey = computed(() => data.value.map(item => item.name))
//用户勾选的分类
const dataList = ref([])
const current = ref(1)
//时间
const time = ref([])
//文档类型
const typesList = ["word", "pdf", "ppt", "excel"]
//热词
const hotWords = ref([])
const total = ref(0)
const options = ref([
	{
		value: "03",
		label: "全部",
	},
	{
		value: "00",
		label: "标题",
	},
	{
		value: "02",
		label: "全文",
	},
	{
		value: "01",
		label: "作者",
	},
	{
		value: "04",
		label: "标签",
	},
])

const form = reactive({
	type: "Option1",
})
const initial = ref("1")
const active = ref("0")
//搜索内容
const searchText = ref("")
const pageSize = ref(10)
//搜索列表
const list = ref([])
const classification = reactive({
	type: "03",
})
const loading = ref(false)
const openLoading = () => {
	loading.value = ElLoading.service({
		lock: true,
		text: "正在加载...",
		background: "rgba(255, 255, 255, 0.7)",
	})
}
const closeLoading = () => {
	loading.value.close()
}
//添加搜索条件
// const jia = () => {
// }
//高亮
watch(route, () => {
	jin()
	shouci()
	if (route.query.tag != "") {
		openLoading()
		if (localStorage.getItem("time")) {
			time.value = JSON.parse(localStorage.getItem("time"))
		}
		if (localStorage.getItem("flie")) {
			fileType.value = JSON.parse(localStorage.getItem("flie"))
			activeFlie.value = typesList.indexOf(fileType.value)
		}
		search(searchText.value, classification.type, time.value)
	}
})

const onSearch = () => {
	initial.value = "2"
	current.value = "1"
	if (searchText.value == "") {
		ElMessage.error("请输入搜索内容")
		list.value = []
		return
	}
	localStorage.setItem("flie", JSON.stringify(fileType.value))
	localStorage.setItem("time", JSON.stringify(time.value))
	if (fileType.value != localStorage.getItem("flie") || time.value != localStorage.getItem("time")) {
		search(searchText.value, classification.type, time.value)
	} else {
		router.push(`/search?tag=${searchText.value}&tags=${classification.type}&active=${activeIndex.value}`)
	}
}

function shouci() {
	if (route.query.tag) {
		searchText.value = route.query.tag
		classification.type = route.query.tags || "03"
		activeIndex.value = route.query.active
	}
	if (localStorage.getItem("time")) {
		time.value = JSON.parse(localStorage.getItem("time"))
	}
	if (localStorage.getItem("flie")) {
		fileType.value = JSON.parse(localStorage.getItem("flie"))
		activeFlie.value = typesList.indexOf(fileType.value)
	}
}

function jin() {
	if (route.query.content) {
		searchText.value = route.query.content
	}
}
jin()
shouci()
if (route.query.tag != "") {
	search()
}
async function search(item, t, time, pageSize) {
	list.value = []
	openLoading()
	let word = "keywords"
	if (classification.type == "04") {
		word = "fileTags"
	} else if (classification.type == "01") {
		word = "fileOwner"
	}
	switch (t) {
		case "00":
			word = "title"
			break
		case "01":
			word = "fileOwner"
			break
		case "02":
			word = "fileContent"
			break
		case "03":
			word = "keywords"
			break
		case "04":
			word = "fileTags"
			break
	}
	const obj = {
		type: t ? t : classification.type,
		[word]: item == "" ? "" : item ? item : route.query.content || route.query.tag,
	}
	if (time) {
		obj.startTime = time[0]
		obj.endTime = time[1]
	}
	if (activeIndex.value == 2) {
		obj.isVideo = 1
	}
	if (fileType.value != "") {
		obj.fileType = fileType.value
	}
	if (dataList.value && dataList.value.length) {
		const lists = []
		dataList.value.forEach(item => {
			lists.push(item.id)
		})
		obj.fileCategorys = lists.join()
	}
	try {
		const { searchHits, totalHits } = await getAxios(
			`/knowledge/es/search?pageSize=${pageSize ? pageSize : 10}&pageNum=${current.value}`,
			obj
		)

		for (let i = 0; i < searchHits.length; i++) {
			dianji.value[i] = true
		}
		if (searchHits.length) {
			total.value = +totalHits
			list.value = searchHits
			if (classification.type == "04" || t == "04" || t == "03" || classification.type == "03") {
				let l = []
				let tagStr = []
				list.value.forEach(item => {
					if (item.content.fileTags) {
						l = item.content.fileTags
						tagStr = searchText.value.split(",")
						for (let i = 0; i < l.length; i++) {
							if (l[i].toLowerCase() == tagStr.toString().toLowerCase()) {
								l[i] = "<font style='color:#006EFF'>" + l[i] + "</font>"
							}
						}
					}
					item.content.fileTags = l
				})
			}
		}
		closeLoading()
	} catch (error) {
		ElMessage.error(error)
	}
}

async function findByListToCategory() {
	if (initial.value == "1") {
		const res = await getAxios("/knowledge/kbSubjectWarehouse/findByListToCategory")
		data.value = res
	} else {
		const res = await getAxios(`/knowledge/kbSubjectWarehouse/findByListToCategoryVideo?isSearch=1`)
		if (res) {
			data.value = [res]
		} else {
			data.value = []
		}
	}
}
findByListToCategory()
async function listHotWord() {
	const res = await getAxios("/knowledge/kbModelLabel/listHotWord")
	hotWords.value = res
}

listHotWord()
//检索
const retrieval = () => {
	localStorage.setItem("flie", JSON.stringify(fileType.value))
	localStorage.setItem("time", JSON.stringify(time.value))
	if (time.value.length == 0 && fileType.value == "" && searchText.value == "") {
		list.value = []
		return ElMessage.error("请输入搜索内容")
	}
	if (fileType.value != localStorage.getItem("flie") || time.value != localStorage.getItem("time")) {
		search(searchText.value, classification.type, time.value)
	} else {
		router.push(`/search?tag=${searchText.value}&tags=${classification.type}&active=${activeIndex.value}`)
	}
	gaoJi.value = false
}
// 时间
// 周
const circumference = () => {
	active.value = "1"
	const d = new Date()
	const sd = new Date(d.getTime() - 7 * 24 * 60 * 60 * 1000)
	time.value = [useFormatDate(sd, "yyyy-MM-dd 00:00:00"), useFormatDate(d, "yyyy-MM-dd 23:59:59")]
	// localStorage.setItem("time", JSON.stringify(time.value))
}
// 月
const moon = () => {
	active.value = "2"
	const d = new Date()
	const sd = new Date(d.getTime() - 30 * 24 * 60 * 60 * 1000)
	time.value = [useFormatDate(sd, "yyyy-MM-dd 00:00:00"), useFormatDate(d, "yyyy-MM-dd 23:59:59")]
	// localStorage.setItem("time", JSON.stringify(time.value))
}
// 年
const year = () => {
	active.value = "3"
	const d = new Date()
	const sd = new Date(d.getTime() - 365 * 24 * 60 * 60 * 1000)
	time.value = [useFormatDate(sd, "yyyy-MM-dd 00:00:00"), useFormatDate(d, "yyyy-MM-dd 23:59:59")]
	// localStorage.setItem("time", JSON.stringify(time.value))
}
//重置按钮
const resetting = () => {
	active.value = "0"
	time.value = []
	fileType.value = ""
	localStorage.removeItem("time")
	localStorage.removeItem("flie")
	activeFlie.value = null
}
//排序
const sorts = index => {
	sortActive.value = index
}

// 所属分类
const onTree = async (_event, { checkedNodes }) => {
	dataList.value = checkedNodes.filter(item => {
		if (dataKey.value.includes(item)) {
			return null
		}
		return item.id
	})
	initial.value = "2"
	search(searchText.value, classification.type, time.value)
}
//热词
const onHotWords = item => {
	if (localStorage.getItem("time")) {
		time.value = JSON.parse(localStorage.getItem("time"))
	}
	if (localStorage.getItem("flie")) {
		fileType.value = JSON.parse(localStorage.getItem("flie"))
		activeFlie.value = typesList.indexOf(fileType.value)
	}
	classification.type = "03"
	if (searchText.value == item.name) {
		search(item.name, "03", time.value)
	} else {
		searchText.value = item.name
		router.push(`/search?tag=${searchText.value}&tags=${classification.type}&active=${activeIndex.value}`)
	}
}
function shijian(time) {
	return time.substring(0, 10)
}
const onTo = async item => {
	if (activeIndex.value == 1) {
		try {
			const findId = item.id.split("-")[0]
			const res = await getAxios(`/kb/kbBasic/findBasic?id=${findId}&num=1`)
			window.c = res
			router.push(`/knowledgeDetails?id=${res.id}&swId=${res.swId}`)
		} catch (error) {
			if (error == "无权限查询该知识") {
				dialogVisible.value = true
			} else {
				ElMessage.error(error)
			}
		}
	} else {
		try {
			const res = await getAxios(`/knowledge/kbVideo/findByIdVideo?id=${item.id}&num=1`)
			window.c = res
			router.push(`/videoDetails?id=${res.id}&swId=${res.swId}`)
		} catch (error) {
			if (error == "无权限查询该知识") {
				dialogVisible.value = true
			} else {
				ElMessage.error(error)
			}
		}
	}
}
const fetchList = async val => {
	current.value = val
	search(searchText.value, classification.type, time.value, 10)
}
const fetchLists = async val => {
	pageSize.value = val
	search(searchText.value, classification.type, time.value, val)
}
const takeEffect = async (row, item) => {
	const obj = row
	obj.status = item
	await postAxios("/knowledge/kbCollect/edit", [obj])
}

const zhiShi = () => {
	activeIndex.value = 1
	options.value = [
		{
			value: "03",
			label: "全部",
		},
		{
			value: "00",
			label: "标题",
		},
		{
			value: "02",
			label: "全文",
		},
		{
			value: "01",
			label: "作者",
		},
		{
			value: "04",
			label: "标签",
		},
	]
	searchText.value = ""
	initial.value = "1"
	list.value = []
	localStorage.removeItem("time")
	localStorage.removeItem("flie")
	activeFlie.value = null
	router.push(`/search?tag=${searchText.value}&tags=${classification.type}&active=1`)
	findByListToCategory()
}
const videoClick = async () => {
	activeIndex.value = 2
	options.value = [
		{
			value: "03",
			label: "全部",
		},
		{
			value: "00",
			label: "标题",
		},
		{
			value: "01",
			label: "作者",
		},
		{
			value: "04",
			label: "标签",
		},
	]
	searchText.value = ""
	initial.value = "2"
	list.value = []
	localStorage.removeItem("time")
	localStorage.removeItem("flie")
	activeFlie.value = null

	router.push(`/search?tag=${searchText.value}&tags=${classification.type}&active=2`)
	findByListToCategory()
}
const onFlie = (val, index) => {
	activeFlie.value = index
	fileType.value = val
}

onUnmounted(() => {
	localStorage.removeItem("time")
	localStorage.removeItem("flie")
})

const cleans = () => {
	searchText.value = ""
}
</script>
<style lang="scss" scoped>
@import "/style/basis";
.emp {
	padding-top: 150px;
	.center {
		margin-bottom: 15px;
	}
}
.search {
	background-color: #f8f8f8;
	.content {
		.souSuo-alert {
			width: 65vw;
			background: #ffffff;
			border: 1px solid #2972fa;
			border-radius: 3px;
			padding: 25px 13px 13px;
			left: 0;
			top: 45px;
			white-space: nowrap;
			z-index: 82;
			:deep(.el-button) {
				width: 180px;
				height: 32px;
				border-radius: 3px;
				margin: 20px 8px 0;
			}

			:deep(.refresh) {
				background: #f3f3f3;
				color: #2972fa;
			}
			.guanbi {
				position: absolute;
				width: 20px;
				height: 20px;
				right: 10px;
				top: -10px;
			}
			.jia-icon {
				width: 20px;
				height: 20px;
				margin-left: 10px;
			}

			.center.flex-start {
				margin-bottom: 20px;
			}

			.text {
				margin-right: 10px;
			}

			:deep(.gaoji-search-type .el-input__wrapper) {
				width: 120px;
				height: 30px;
				border: 1px solid #dcdfe6;
				border-radius: 3px;
				box-shadow: none;
				margin-right: 10px;
			}

			:deep(.gaoji-search-type2 .el-input__wrapper) {
				width: 90px;
			}

			:deep(.gaoji-input) {
				width: 220px;
				height: 32px;
				border: 1px solid #dcdfe6;
				border-radius: 3px;
			}

			:deep(.gaoji-input .el-input__wrapper) {
				box-shadow: none;
				border-radius: 3px;
			}

			:deep(.el-date-editor) {
				margin-right: 15px;
				width: 300px;
				height: 30px;
				border: 1px solid #dcdfe6;
				border-radius: 3px;
				box-shadow: none;
			}

			.hr {
				width: 1px;
				height: 13px;
				background: #999999;
			}

			.c666 {
				width: 50px;
				height: 25px;
				border-radius: 5px;
				margin: 5px;
				text-align: center;

				&.btheme {
					color: #fff;
				}
			}

			.label {
				width: 115px;
				overflow: hidden;
			}
		}

		.right {
			padding-bottom: 20px;
			overflow-y: auto;
			min-height: 78vh;
			.hei {
				color: #000;
				padding-right: 10px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.hei-right {
				padding-right: 15px;
			}
			.right-main {
				margin-right: 25px;
				padding: 20px 25px 0;
				@include maxWidth(1024) {
					margin: 0 5vw;
				}

				.box {
					border-bottom: 1px solid #eceef5;
					padding: 10px 0;

					:deep(.el-button__text--expand) {
						margin-left: 5px;
					}

					:deep(.el-button) {
						height: 30px;
						line-height: 25px;
						padding: 0 7px;
						border-radius: 1px;
					}

					.author {
						padding: 10px 0 15px;
						display: flex;
						.authorName {
							margin-right: 30px;
						}
					}
					.conter-text {
						padding-right: 10px;
						padding-bottom: 13px;
						// display: -webkit-box; //对象作为弹性伸缩盒子模型显示
						// overflow: hidden; //溢出隐藏
						// -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
						// -webkit-line-clamp: 2; //设置 块元素包含的文本行数
						// margin-bottom: 20px;
					}

					.title {
						padding-right: 20px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.bq {
						padding: 0 5px;
					}
				}

				.screen {
					.hover {
						padding-left: 15px;
					}
				}
			}

			.right-top {
				padding: 15px 0;
				@include maxWidth(1024) {
					padding: 15px 10vw 15px 15vw;
				}
				@include maxWidth(750) {
					padding: 15px 5vw 15px 10vw;
				}
				.f18 {
					padding: 5px 10px 10px;
				}
				.re {
					padding-top: 10px;
					padding-left: 50px;
					padding-right: 40px;
					@include maxWidth(1400) {
						padding-left: 25px;
						font-size: 14px;
					}
					@include maxWidth(1024) {
						padding-left: 10px;
						font-size: 12px;
					}
					.re-wrap {
						display: flex;
						flex-wrap: wrap;
						.reci {
							line-height: 1.5;
						}
					}
					// .flex {
					// 	overflow-x: scroll;
					// }
				}

				.cff9 {
					margin-right: 10px;
				}

				.huo-icon {
					width: 13px;
					height: 15px;
					margin-right: 12px;
				}

				:deep(.search-btn) {
					width: 80px;
					height: 40px;
					background: #2972fa;
					border-radius: 0 5px 5px 0;
					letter-spacing: 5px;
					margin-right: 15px;
				}
				.input-q {
					position: relative;

					.elInput {
						position: relative;
						width: 60vw;
						height: 40px;
						border-bottom: 1px solid #2972fa;
						border-top: 1px solid #2972fa;
						// padding: 0 14px;
						margin-left: -1px;
						:deep(.el-input__wrapper) {
							border: 0;
							border-radius: 0;
						}
						@include maxWidth(1400) {
							width: 50vw;
						}
						@include maxWidth(1024) {
							width: 45vw;
						}
						@include maxWidth(700) {
							width: 50vw;
						}
						@include maxWidth(650) {
							width: 45vw;
						}
						@include maxWidth(500) {
							width: 35vw;
						}
					}
					// .clean {
					// 	position: absolute;
					// 	cursor: pointer;
					// 	top: 10px;
					// 	right: 8px;
					// 	color: #aaa;
					// 	border: 1px solid #ddd;
					// 	// padding: 0px 5px;
					// 	border-radius: 50%;
					// 	font-size: 12px;
					// }
				}

				:deep(.search-type .el-input__wrapper) {
					width: 80px;
					height: 40px;
					border: 1px solid #2972fa;
					border-radius: 5px 0 0 5px;
					padding: 0 13px;
					font-size: 15px;
					color: #606266;
					box-shadow: none;
				}
			}

			.type {
				padding-bottom: 4px;

				.f31 {
					padding: 3px 12px 10px;
					cursor: pointer;

					&:hover {
						background: url(@/assets/image/search/search.png) no-repeat center bottom;
						background-size: 100% 100%;
						color: #fff;
					}
				}

				.cfff {
					background: url(@/assets/image/search/search.png) no-repeat center bottom;
					background-size: 100% 100%;
				}
			}
		}

		.left {
			margin: 10vh 20px 15px 25px;
			width: 225px;
			@include maxWidth(1400) {
				width: 200px;
			}

			:deep(.el-tree-node__expand-icon) {
				font-size: 15px;
			}

			:deep(.el-tree) {
				padding: 20px 0;
				color: #606266;
				font-size: 15px;
			}

			.title {
				border-bottom: 1px solid rgba(41, 114, 250, 0.1);
				padding: 20px 0 0 17px;

				span {
					border-bottom: 1px solid #2972fa;
					line-height: 2;
				}

				.hr {
					width: 4px;
					height: 14px;
					background: #2972fa;
					margin-right: 8px;
				}
			}
		}
		.acline {
			align-items: stretch;
		}
		.labels {
			display: flex;
			flex-direction: column;
			// justify-content: space-around;
			@include maxWidth(600) {
				display: none;
			}
		}
		.content {
			padding: 0 50px;
		}
	}
}
.flie {
	display: flex;
	.flie-text {
		margin: 0 10px;
		cursor: pointer;
	}
	.flieText2 {
		color: #2972fa;
	}
	.flie-item {
		display: flex;
		flex-wrap: wrap;
	}
}
.dianjiAll {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}
.classification-tree {
	@include maxWidth(1024) {
		display: none;
	}
}
.cast {
	display: none;
	@include maxWidth(1024) {
		display: block;
		border-radius: 3px;
		width: 30px;
		background-color: #2972fa;
		padding: 10px;
		color: #fff;
		position: fixed;
		font-size: 12px;
		text-align: center;
		top: 40%;
		left: 0;
	}
}
.gaoji {
	@include maxWidth(700) {
		display: none;
	}
}
// :deep(.el-drawer__body) {
// 	width: 40vw;
// }
.conter-text1 {
	padding-right: 10px;
	display: -webkit-box; //对象作为弹性伸缩盒子模型显示
	overflow: hidden; //溢出隐藏
	-webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
	-webkit-line-clamp: 2; //设置 块元素包含的文本行数
	margin-bottom: 13px;
}
</style>
